<template>
  <div class="address-index">
    <Header>我的地址</Header>

    <section ref="section">
      <div>

        <div class="info" v-for="address of addresses" :key="address.id" @click="handleEdit(address)">
          <div class="left">
            <div class="user">
              <span>{{ address.consignee }}</span>
              <span>{{ address.consignee_tel }}</span>
            </div>

            <div class="wz">
              <p>
                <span>{{ address.area }}</span>
                {{ address.address }}
              </p>
            </div>
          </div>
          <icon class="icon" name="arrow" />
        </div>
        <button @click="$router.push('/address/editAdd')">添加地址</button>

      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import { Icon } from 'vant'
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'

import Header from '@/components/common/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import { ref, onMounted, reactive } from 'vue'
import { deliveryAddress_all } from '@/api/deliveryAddressApi'
import { useRouter } from 'vue-router'

const router = useRouter()

//设置页面滚动
const section = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  new BScroll(section.value, {
    observeDOM: true,
    observeImage: true,
    click: true
  })
})

let addresses = await deliveryAddress_all()

const handleEdit = address => {
  router.push({
    path: '/address/editAdd',
    query: {
      ...address
    }
  })
}
</script>

<style lang="less" scoped>
.address-index {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  section {
    flex: 1;
    overflow: hidden;
    background: #f5f5f5;

    >div {
      overflow: hidden;

      >button {
        width: 120px;
        height: 40px;
        background-color: #b0352f;
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
        border: none;
        margin: 40px auto 20px;
        
        display: block;
      }
    }

    .info {
      display: flex;
      align-items: center;
      min-height: 100px;
      background-color: #fff;
      margin-top: 10px;

      .left {
        flex: 1;
        overflow: hidden;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .user {
          color: #333;
          font-size: 14px;
          font-weight: 700;
          padding: 0 0 8px ;
          span:nth-of-type(1) {
            margin-right: 15px;
          }
        }

        .wz{
          font-size: 14px;
          color: #222;
          p {
            word-break: break-all;
            word-wrap: break-word;
          }
        }
      }
      .icon {
        font-size: 26px;
        color: #9e9e9e;
        width: 50px;
        text-align: center;
      }
    }
  }
}
</style>